@import _tokens

.timeline-filter-wrapper
  display: flex
  background-color: $filterbar-background
  color: $filter-text
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1)
  padding: 5px 0
  min-height: 50px

  h2
    font-size: 1em
    margin: 0

.timeline-filter
  display: flex
  max-width: 1600px
  margin: 0 10px

.filters-group,
.search-group,
.search-with-button
  display: flex

.input-group
  display: flex
  align-items: center

.expand-filters-button,
.sort-button
  display: flex
  align-items: center
  background-color: transparent
  border: 0

.expand-filters-button
  color: $filter-text

  &:disabled
    color: $filter-text

.sort-button
  color: $filter-text
  margin-left: 10px
  min-height: 38px

  i
    margin-right: 5px

.filters-expandable
  justify-content: space-between

.filter-and-button, .filters-expandable
  display: flex
  align-items: center

.filter-select div[class*="-menu"]
  z-index: 6

.search-group
  .search-input
    min-height: 38px // Match select height
    border: 1px solid $filterbar-border
    border-radius: 4px
    padding-left: 10px

.search-results-menu
  display: none
  position: absolute
  margin: 3px 10px 0 0
  padding: 0
  background-color: $card-background
  min-width: 300px
  max-width: 600px
  max-height: 50%
  overflow: hidden auto
  border: 1px solid $filterbar-border
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2)
  z-index: 6

  li
    list-style: none

  &.is-open
    display: block

  .search-help
    color: $timestamp-color
    font-style: italic
    padding: 10px

  .search-result
    margin: 0
    padding: 10px
    cursor: pointer
    font-size: 0.9em

    &:not(:last-child)
      border-bottom: 1px solid #eee

    &.highlighted
      background-color: $filter-highlight

    em
      font-style: normal
      font-weight: bold

    .result-title, .timestamp
      margin-bottom: 5px

    .timestamp, .result-body
      font-size: 0.85em

    .result-body
      overflow: hidden
      text-overflow: ellipsis
      display: -webkit-box
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical

// All screens > LG
@media only screen and (min-width: #{$lg-breakpoint + 1}px)
  .timeline-filter
    width: 90%
    margin: 0 auto

    .expand-filters-button
      margin-right: 20px

      .fa-caret-down
        display: none

  .filters-expandable
    flex-grow: 1

// All screens < LG
@media only screen and (max-width: #{$lg-breakpoint}px)
  .timeline-filter, .filters-expandable
    width: 100%
    flex-direction: column

  .filters-expandable
    display: none
    border-top: 1px solid $timeline-line-color

    &.expanded
      display: flex

    .filter-select
      flex-grow: 1
      margin-top: 10px

  .expand-filters-button
    height: 30px
    flex-grow: 1
    justify-content: space-between

  .filters-group
    margin-bottom: 5px

  .search-and-results
    width: 100%

  .search-container, .search-input
    flex-grow: 1

  .search-container
    display: flex

// All screens > MD
@media only screen and (min-width: #{$md-breakpoint + 1}px)
  .filters-group .filter-select:not(:last-child)
    margin-right: 20px

// MD screens
@media only screen and (min-width: #{$md-breakpoint + 1}px) and (max-width: #{$lg-breakpoint}px)
  .filters-expandable
    align-items: start

  .filters-group, .search-group, .search-container
    width: 100%

// All screens < MD
@media only screen and (max-width: #{$md-breakpoint}px)
  .filters-group, .search-group, .search-container
    width: 100%
    flex-direction: column
    align-items: center

  .filter-select, .search-input, .sort-button, .search-results-menu
    width: 90%

  .search-results-menu
    left: calc(5% + 10px)
    max-width: none

  .sort-button
    margin-left: 0
    justify-content: center

  .inline-checkbox
    padding: 10px 0

  .filters-group
    border-bottom: 1px solid $timeline-line-color

  .search-group
    margin-top: 10px

// Dark mode
@mixin filtersDarkMode()
  .timeline-filter-wrapper
    background-color: $dark-filterbar-background
    color: $dark-filter-text
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1)

  .timeline-filter
    .expand-filters-button, .sort-button
      color: $dark-filter-text

      &:disabled
        color: $dark-filter-text

    .filters-expandable
      border-color: $dark-timeline-line-color

  .filter-select

    >div
      background-color: $dark-lightbox-background
      border-color: $dark-timeline-line-color

    div[class*="-control"]
      border-color: $dark-card-background !important
      box-shadow: $dark-card-background !important

    div[class*="-placeholder"],  div[class*="-singleValue"]
      color: $dark-filter-text

    div[class*="-indicatorContainer"]:hover
      color: #666666

    div[class*="-menu"] div[class*="option"]
      background-color: $dark-lightbox-background
      cursor: pointer

      &:hover, &:active
        background-color: $dark-card-background

  .search-group
    .search-input
      background-color: $dark-lightbox-background
      color: $dark-filter-text
      border-color: $dark-timeline-line-color

      &::placeholder
        color: $dark-filter-text

      &:focus-visible
        outline-style: solid

    .search-results-menu
      background-color: $dark-lightbox-background
      border: 1px solid $dark-filterbar-border
      scrollbar-color: #606060 $dark-lightbox-background

    .search-result
      &:not(:last-child)
        border-bottom-color: $dark-filterbar-border

      &.highlighted
        background-color: $dark-card-background
